<template>
  <div class="demo-request">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>GET请求演示</span>
            </div>
          </template>
          <el-button 
            type="primary"
            :loading="loading"
            @click="handleGetData"
          >
            发送GET请求
          </el-button>
          <div class="result">
            <pre>{{ getData }}</pre>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>POST请求演示</span>
            </div>
          </template>
          <el-form :model="postForm">
            <el-form-item>
              <el-input 
                v-model="postForm.username"
                placeholder="用户名"
              />
            </el-form-item>
            <el-form-item>
              <el-input 
                v-model="postForm.password"
                type="password"
                placeholder="密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button 
                type="primary"
                :loading="loading"
                @click="handlePostData"
              >
                发送POST请求
              </el-button>
            </el-form-item>
          </el-form>
          <div class="result">
            <pre>{{ postData }}</pre>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import request from '@/utils/request'
import type { TestItem, LoginParams, LoginResult } from '@/types/user'

// 加载状态
const loading = ref(false)

// GET请求相关
const getData = ref<TestItem[]>([])

const handleGetData = async () => {
  try {
    loading.value = true
    console.log('Sending GET request...')
    const res = await request.get<{ list: TestItem[] }>('/api/test', {
      loading: true,
      showError: true
    })
    console.log('GET response:', res)
    getData.value = res.data.list
  } catch (error) {
    console.error('GET error:', error)
  } finally {
    loading.value = false
  }
}

// POST请求相关
const postForm = reactive<LoginParams>({
  username: 'admin',
  password: '123456'
})
const postData = ref<LoginResult | null>(null)

const handlePostData = async () => {
  try {
    loading.value = true
    console.log('Sending POST request...', postForm)
    const res = await request.post<LoginResult>('/api/login', postForm, {
      loading: true,
      showError: true
    })
    console.log('POST response:', res)
    postData.value = res.data
    localStorage.setItem('token', res.data.token)
  } catch (error) {
    console.error('POST error:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.demo-request {
  .result {
    margin-top: 20px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
    
    pre {
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
  
  .el-button {
    width: 100%;
  }
}
</style> 